<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>自定义指令</title>
    <script type="text/javascript" src="./../vue.js/vue.js"></script>
  </head>

  <body>
    <div id="root">
      <h2>当前的n值是: <span v-text="n"></span></h2>
      <h2>放大10倍后的n值是: <span v-big-number="n"></span></h2>
      <button @click="n++">点我n+1</button>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;

      // 定义全局指令
      Vue.directive("big-number", (element, binding) => {
        element.innerText = binding.value * 10;
      });

      new Vue({
        el: "#root",
        data: {
          n: 1,
        },
      });
    </script>
  </body>
</html>

<!-- 
	自定义指令总结:
		一、定义语法:
					(1).局部指令:
								new Vue({
									directives{指令名:回调函数}
									或
									directives:{指令名:配置对象}
								})
					(2).全局指令:
								Vue.directive(指令名,配置对象) 
								或   
								Vue.directive(指令名,回调函数)

		二、配置对象中常用的3个回调:
					(1).bind:指令与元素成功绑定时调用.
					(2).inserted:指令所在元素被插入页面时调用.
					(3).update:指令所在模板结构被重新解析时调用.

		三、备注:
					1. 指令定义时不加v-,但使用时要加v-;
					2. 指令名如果是多个单词, 要使用 kebab-case 命名方式,不要用 camelCase 命名.
-->
